<template>
<div class>
  <head :title="title"></head>
  <div class="wrapper content">
    <div class="row">
      <text class="nominal">Name</text>
      <div class="inputbox">
        <input
          class="input"
          placeholder="Enter receive name"
          type="text"
          v-model="userData.refund_name"
        />
      </div>
    </div>
    <div class="row">
      <text class="nominal">Phone</text>
      <div class="inputbox">
        <input
          class="input"
          placeholder="Enter receive phone"
          type="text"
          v-model="userData.refund_phone"
        />
      </div>
    </div>

    <div class="row">
      <text class="nominal">Address</text>
      <div class="inputbox">
        <textarea
          class="input"
          v-model="userData.refund_address"
          auto-height="true"
          placeholder="Enter receive address"
        ></textarea>
      </div>
    </div>
  </div>
  <div class="content mt20"></div>

  <div class="save">
    <text class="btn" @click="saveData">Confirm</text>
  </div>
  <wxc-popup
    height="600"
    pos="bottom"
    ref="showAddress"
    :show="showAddress"
    @wxcPopupOverlayClicked="showAddress=false"
  >
    <CityPicker @confirm="confirm"></CityPicker>
  </wxc-popup>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import CityPicker from "../../../component/citypicker/cityPicker.vue";
import asCore from "../../../mixin/core";
import { WxcPopup } from "weex-ui";

import { edit_users_info } from "../../../mixin/ajax";
export default {
  components: {
    CityPicker,
    WxcPopup
  },
  data() {
    return {
      postData: {},
      showAddress: false,
      userData: {},
      fromPage: "",
      title: "return address",
      editType: "edit",
      id: "",
      name: "Li Li",
      tel: "",
      detailed: "",
      isDefault: false,
      cityPickerValue: [0, 0, 1],
      themeColor: "#007AFF",
      region: {
        label: "",
        value: [],
        cityCode: ""
      }
    };
  },
  created() {
    asCore.getContext(userData => {
      if (userData) {
        this.userData = Object.assign({}, this.userData, userData);
      }
    });
  },
  methods: {
    onLoad(parmar) {
      if (parmar && parmar.parmar) {
        return false;
      }
    },
    onCancel(e) { 
    },

    saveData() {
     
      let that = this;
      edit_users_info(
        {
          users_id: this.userData.users_uuid,
          refund_name: this.userData.refund_name,
          refund_phone: this.userData.refund_phone,
          refund_address: this.userData.refund_address
        },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            const updateImg = new BroadcastChannel("updateImg");
            updateImg.postMessage("update");
            if (res.code == 200) {
              setTimeout(() => {
                that.back();
              }, 500);
            }
          }
        }
      );
    },

    onConfirm(e) {
      this.region = e;
      this.cityPickerValue = e.value;
    },
    isDefaultChange(e) {
      // this.isDefault = e.detail.value;
    },

    save() {
      let data = {
        name: this.name,
        head: this.name.substr(0, 1),
        tel: this.tel,
        address: {
          region: this.region,
          detailed: this.detailed
        },
        isDefault: this.isDefault
      };
      if (this.editType == "edit") {
        data.id = this.id;
      }
      if (!data.name) {
        return;
      }
      if (!data.tel) {
        return;
      }
      if (!data.address.detailed) {
        return;
      }
      if (data.address.region.value.length == 0) {
        return;
      }
      uni.showLoading({
        title: "正在提交"
      });
      //实际应用中请提交ajax,模板定时器模拟提交效果
      setTimeout(() => {
        uni.setStorage({
          key: "saveAddress",
          data: data,
          success() {
            uni.hideLoading();
            uni.navigateBack();
          }
        });
      }, 300);
    }
  },
  onLoad(e) {
    //获取传递过来的参数

    this.editType = e.type;
    if (e.type == "edit") {
      uni.getStorage({
        key: "address",
        success: e => {
          this.id = e.data.id;
          this.name = e.data.name;
          this.tel = e.data.tel;
          this.detailed = e.data.address.detailed;
          this.isDefault = e.data.isDefault;
          this.cityPickerValue = e.data.address.region.value;
          this.region = e.data.address.region;
        }
      });
    }
  },
  onBackPress() {
    if (this.$refs.mpvueCityPicker.showPicker) {
      this.$refs.mpvueCityPicker.pickerCancel();
      return true;
    }
  },
  onUnload() {
    if (this.$refs.mpvueCityPicker.showPicker) {
      this.$refs.mpvueCityPicker.pickerCancel();
    }
  }
};
</script>
<style scoped>
.icon {
  height: 80px;
  color: #fff;
  font-size: 30px;
  justify-content: center;
  align-items: center;
}

.wrapper {
  background-color: #f5f5f5;
}

.content {
  padding: 0 30px;
  background-color: #fff;
}

.mt20 {
  margin-top: 20px;
}
.mask {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.38);
}
.row {
  width: 690px;
  flex-direction: row;
  background-color: #fff;
  align-items: center;
  border-bottom-color: #e6e6e6;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  min-height: 100px;
}

.nominal {
  width: 220px;
  font-size: 30px;
}

.inputbox {
  flex: 1;
  padding: 20px 0;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 30px;
}

.input {
  flex: 1;
  height: 60px;
  line-height: 60px;
  font-size: 30px;
}

.c999 {
  color: #999;
  font-size: 30px;
}

.longtitle {
  flex: 1;
  font-size: 30px;
}

.switch {
  justify-content: flex-end;
  flex-direction: row;
}

.textarea {
  margin: 20px 0;
  min-height: 120px;
}

.delloca {
  width: 700px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
  color: #f06c7a;
  background-color: rgba(255, 0, 0, 0.05);
  /* border-bottom: solid 1px #eee; */
}

.save {
  position: fixed;
  bottom: 0;
  width: 750px;
  height: 120px;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 690px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
}

.btn:active {
  background-color: #222;
}
</style>
